@border-color: #efefef;

:host {
  display: flex;
  flex-direction: column;
  flex: 0 0 300px;
  height: 100vh;
  width: 300px;
  background-color: white;
  border-right: 1px solid @border-color;
}

.sider {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;

  .app-sider-content {
    overflow: auto;
    flex: 1;

    ul {
      border-right: none;

      li {
        width: 100%;
      }

      a.active {
        font-weight: bold;
      }

      .section {
        position: relative;

        .nav-text {
          font-size: 15px;

          .icon {
            width: 23px;
            height: 23px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 9px;
            text-align: center;
          }

          i.emoji {
            height: 23px;
            width: 23px;
            display: inline-block;
            font-style: normal;
            font-size: large;
            margin-right: 9px;
            text-align: center;
          }

          span {
            vertical-align: baseline;
          }
        }

        .nav-number {
          position: absolute;
          right: 0;
          top: 2px;
        }
      }
    }

    .newList {
      height: 42px;
      line-height: 42px;
      padding: 0 16px;
      cursor: pointer;

      span {
        font-size: 15px;
        color: #108ee9;

        i {
          color: #49a9ee;
          font-size: 17px;
          margin: 0 11px 0 3px;
        }
      }

      &:hover {
        background-color: whitesmoke;
      }
    }
  }
}

